/***************************************************************************
 *   This is a part of the NextCAD Web APP.                                *
 *   Copyright (C) AMCAX, All rights reserved.                             *
 ***************************************************************************/

import { BaseCommand } from '@amcax/base';
import { useEffect, useRef } from 'react';

import CmdInteractor from './CmdInteractor';
import { RectangleRelation } from './types';

function CmdRectangle({
  rectangleType,
  onClose,
  name,
}: {
  rectangleType: RectangleRelation;
  onClose: () => void;
  name: string;
}) {
  const cmdRef = useRef<CmdInteractor>(null);
  useEffect(() => {
    cmdRef.current = new CmdInteractor(rectangleType, name);
    cmdRef.current.addExit(onClose);
    return () => {
      cmdRef.current?.destroy();
      cmdRef.current = null;
    };
  }, [rectangleType]);
  return <></>;
}

// 对角线矩形
export const cmdDiagonal: BaseCommand = {
  id: 'CmdDiagonal',
  label: 'command.diagonal_rectangle',
  icon: 'commands/sketch/corner-rectangle',
  group: 'sketch',
  create: (label: string, onClose: () => void) => (
    <CmdRectangle
      onClose={onClose}
      name='cmdDiagonalRectangle'
      rectangleType={RectangleRelation.DIAGONAL}
    />
  ),
};
// 中心矩形
export const cmdCenter: BaseCommand = {
  id: 'CmdCenter',
  label: 'command.center_rectangle',
  icon: 'commands/sketch/center-rectangle',
  group: 'sketch',
  create: (label: string, onClose: () => void) => (
    <CmdRectangle
      name='cmdCenterRectangle'
      onClose={onClose}
      rectangleType={RectangleRelation.CENTER}
    />
  ),
};
// 平行四边形
export const cmdParallel: BaseCommand = {
  id: 'CmdParallel',
  label: 'command.parallel_rectangle',
  icon: 'commands/sketch/parallelogram',
  group: 'sketch',
  create: (label: string, onClose: () => void) => (
    <CmdRectangle
      name='cmdParallelRectangle'
      onClose={onClose}
      rectangleType={RectangleRelation.PARALLEL}
    />
  ),
};
// 3点拐角矩形
export const cmdThreePoint: BaseCommand = {
  id: 'CmdThreePoint',
  label: 'command.inflection_rectangle',
  icon: 'commands/sketch/new-3-point-corner-rectangle',
  group: 'sketch',
  create: (label: string, onClose: () => void) => (
    <CmdRectangle
      name='cmdThreePointRectangle'
      onClose={onClose}
      rectangleType={RectangleRelation.THREE_POINT}
    />
  ),
};
// 3点中兴矩形
export const cmdThreeCenterPoint: BaseCommand = {
  id: 'CmdThreePointCenter',
  label: 'command.three-point-center-rectangle',
  icon: 'commands/sketch/three-point-center-rectangle',
  group: 'sketch',
  create: (label: string, onClose: () => void) => (
    <CmdRectangle
      name='cmdThreePointCenterRectangle'
      onClose={onClose}
      rectangleType={RectangleRelation.THREE_POINT_CENTER}
    />
  ),
};
